<template>
  <div>
    <el-form :inline="true" :model="params" class="demo-form-inline">
    <el-form-item label="id">
      <el-input v-model="params._id" placeholder="请输入" clearable />
    </el-form-item>
     <el-form-item label="用户名">
      <el-input v-model="params.userName" placeholder="请输入" clearable />
    </el-form-item>
    <el-form-item label="角色">
      <el-select
        v-model="params.vip"
        placeholder="请选择"
        clearable
      >
        <el-option label="普通" value="0" />
        <el-option label="vip1" value="1" />
        <el-option label="vip2" value="2" />
      </el-select>
    </el-form-item>
   
    <el-form-item>
      <el-button type="primary" @click="search">查询</el-button>
    </el-form-item>
  </el-form>
    <el-card>
      <el-table :data="tableData" style="width: 100%">
        <el-table-column
          prop="_id"
          label="id"
          width="280"
        ></el-table-column>
        <el-table-column
          prop="userName"
          label="用户名"
          width="180"
        ></el-table-column>
        <el-table-column prop="avatar" label="头像" width="180">
          <template #default="scope">
            <div style="display: flex; align-items: center">
              <el-avatar
                :src="scope.row.avatarUrl"
                v-if="scope.row.avatarUrl"
              >
              </el-avatar>
              <el-avatar
                v-else
                src="https://cube.elemecdn.com/0/88/03b0d39583f48206768a7534e55bcpng.png"
              >
              </el-avatar>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="vip" label="角色" width="180">
          <template #default="scope">
            <el-tag :type="scope.row.vip == 1 ? 'warning' : 'success'">{{
              scope.row.vip == 1 ? "会员用户" : "普通用户"
            }}</el-tag>
          </template>
        </el-table-column>
        <el-table-column prop="vip" label="角色切换" width="180">
          <template #default="scope">
            <el-switch
              v-model="scope.row.vip"
              :active-value="1"
              :inactive-value="0"
              @change="publishChange(scope.row)"
            />
          </template>
        </el-table-column>
        <el-table-column
          prop="day"
          label="学习天数"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="done"
          label="做题数量"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="correct"
          label="正确数量"
          width="80"
        ></el-table-column>
        <el-table-column
          prop="rate"
          label="正确率"
          width="80"
        >
        <template #default="scope">
          {{ scope.row.correct == 0 ? 0 : (scope.row.correct *100 / scope.row.done).toFixed(0)}} %
          
       
          </template>
      </el-table-column>
        <el-table-column
          prop="createTime"
          label="创建时间"
          width="250"
        >
        <template #default="scope">
            {{ formDataMoment(scope.row.createTime) }}
          </template>
      </el-table-column>
        <el-table-column prop="action" label="操作">
          <template #default="scope">
            
            <el-popconfirm
              title="确认删除吗"
              confirm-button-text="确认"
              cancel-button-text="删除"
              @confirm="handleDelete(scope.row._id)"
            >
              <template #reference>
                <el-button size="small" type="danger">删除</el-button>
              </template>
            </el-popconfirm>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination background layout="prev, pager, next" :total="total"  @current-change="handleCurrentChange" :page-size="10"/>
    </el-card>
  </div>
</template>

<script setup>
import { ref, onMounted, reactive } from "vue";
import axios from "axios";
import { ElMessage, ElMessageBox } from "element-plus";
import myUtil from "../../util/util.js"
import moment from "moment";
const dialogVisible = ref(false);
const total = ref(0);
const tableData = ref([]);
const userFormRef = ref();
const params = ref({
  _id:"",
  pageNo:1,
  userName:"",
  vip:""
})


const formDataMoment = (date) => {
      return moment(date).format("YYYY-MM-DD HH:mm:ss")
};
const handleCurrentChange = (e) => {
  params.value.pageNo = e
  getList();
}
const search = () => {
    params.value.pageNo = 1
    getList()
}
const publishChange = async(item) => {
  console.log('item.vip',item.vip)
  // let flag = 1
  // if (item.vip == 1) {
  //   flag = 0
  // }
  let res = await axios.post("/wxapi/user/changeVip",{
    userId:item._id,
    flag:item.vip
  });
  if(res.data.code == 200) {
    ElMessage.success("操作成功");
    getList();
  }else {
    ElMessage.success("操作失败");
  }
  console.log('111')
}
const handleDelete = async (id) => {
  let res = await axios.post(`/wxapi/user/deleteUser`,{
    userId:id
  });
  if (res.data.code == 200) {
    ElMessage.success("操作成功");
    getList();
  } else {
    ElMessage.success("操作失败");
  }
};
onMounted(() => {
  console.log('111111111')
  getList();
});


const getList = async () => {
  let res = await axios.get("/wxapi/user/getUserList",{
    params:params.value
  });
  tableData.value = res.data.data.result;
  total.value = res.data.data.total
  console.log("res", res.data);
};
</script>